
/* 

    float: left; 是用来让块级元素在保持块级元素的同时，不满足100%宽度的情况下，并列排到一行上去

    overflow: hidden;  两个作用： 第一个超出隐藏；第二个作用： 清除子级元素浮动（float:left）

    清除浮动有三种写法，常用的有两种，分别是 overflow: hidden; clear: both;

    通常用于百分比布局（或者栅格化布局）情况下使用

*/

.row{
    width: 80%;
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;
}

.row div{
    height: 20px;
    float: left;
}

.row-1{
    width: 8.333333%;
    background: brown;
}

.row-2{
    width: 16.666667%;
    background: burlywood;
}

.row-3{
    width: 25%;
    background: chartreuse;
}

.row-4{
    width: 33.333333%;    
    background: coral;
}

.row-5{
    width: 41.666665%;
    background: crimson;
}

.row-6{
    width: 50%;
    background: darkblue;
}

.row-7{
    width: 58.333333%;
    background: darkgray;
}

.row-8{
    width: 66.666667%;
    background: darkkhaki;
}

.row-9{
    width: 75%;
    background: darkred;
}

.row-10{
    width: 83.333333%;
    background: darkslateblue;
}

.row-11{
    width: 91.666667%;
    background: deepskyblue;
}

.row-12{
    width: 100%;
    background: forestgreen;
}

/* .test1{
    width: 50px;
    height: 50px;
    background: lightcoral;
    display: inline-block;
}

.test2{
    width: 50px;
    height: 50px;
    background: lightsalmon;
    display: inline-block;
} */